<script setup lang="ts">
// 引入标题
import IndexTitle from '@/components/IndexTitle.vue';
// 引入图表组件
import Charts from '@/components/charts.vue';

// 引入vue
import { ref, onMounted } from "vue"
// 引入options数据
import { BarOptions } from '@/utils/option';

import { get_ji } from '@/api';
// 2022年的
let data=0
// 2023
let data2023=0
// 2021
let data2021=0
get_ji().then((res)=>{
    console.log(res.data.data.result,'基本信息');
    const obj=res.data.data.result
    obj.forEach((item:any)=>{
        if(item.gradYear===2022){
            data+=item.total;  
        }
        if(item.gradYear===2023){
            data2023+=item.total;
        }
        if(item.gradYear===2021){
            data2021+=item.total;
        }
    })
    console.log(data,'data');
    console.log(data2023,'data2023');
})
</script>

<template>
    <!-- 左上 -- 近三年来人员去向 -->
    <div class="left-top_container">
        <!-- 标题 -->
        <index-title title="近三年来毕业人员去向" :show="true"></index-title>
        <!-- 主要内容 -->
        <div class="left-top_content">
            <!-- 头部图标 -->
            <div class="top">
                <div>
                    <p>{{data2021}}</p>
                    <img src="../../../assets/icon/2022.jpg" alt="">
                    <p>2021年</p>
                </div>
                <div>
                    <p>{{data}}</p>
                    <img src="../../../assets/icon/2021.jpg" alt="">
                    <p>2022年</p>
                </div>
                <div>
                    <p>{{data2023}}</p>
                    <img src="../../../assets/icon/2020.jpg" alt="">
                    <p>2023年</p>
                </div>
            </div>
            <!-- 图表 -->
            <div class="echart">
                <Charts :option="BarOptions">
                </Charts>
            </div>
        </div>
    </div>
</template>


<style scoped lang="scss">
.left-top_container {
    width: 100%;
    height: 50%;
    margin-bottom: 20px;

    .left-top_content {
        width: 100%;
        height: calc(100% - 40px);


        .top {
            width: 100%;
            height: 76px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;

            >div {
                font-size: 12px;

                p {
                    padding: 0;
                    margin: 0;
                    line-height: 20px;
                    color: #ff0abb;
                }

                p:nth-child(2) {
                    font-size: 10px;
                }
            }

            >div:nth-child(1)>p {
                color: #ff0abb;
            }

            >div:nth-child(2)>p {
                color: #11b9dc;
            }

            >div:nth-child(3)>p {
                color: #fdd14d;
            }
        }

        .echart {
            width: 100%;
            height: calc(100% - 76px);
            margin-top: 5px;
        }
    }
}
</style>